<template>
  <div class="main">
    <div class="lefttwo">
      <div class="klpx">
        <div class="title">客流排行</div>
        <div id="klchart" class="klchart"></div>
      </div>
      <div class="jdqk">
        <div class="title">酒店情况</div>
        <div class="jdgl">
          <div id="jdchart" class="jdchart"></div>
          <div class="jdlist">
            <div class="jdrubz">酒店入住率排行</div>
            <div class="jdrzfour">珑海酒店(徐闻海安新港码头店)</div>
            <div class="jdrzfour">徐闻菠萝酒店</div>
            <div class="jdrzfour">铂尔酒店(徐闻站店)</div>
          </div>
        </div>
        <div class="jdrubz" style="margin-top: 20px">
          酒店数量： <span class="jdslnum">120</span>
        </div>
        <div class="jddj">
          <div v-for="(item, index) in 4" class="djlabel">等级{{ index }}</div>
        </div>
        <div class="jddj">
          <div v-for="(item, index) in 4" class="djlabel1"></div>
        </div>
        <div class="jddj">
          <div
            v-for="(item, index) in 4"
            style="margin-top: 5px"
            class="djlabel"
          >
            1家
          </div>
        </div>
      </div>
      <div class="cyzhpx">
        <div class="title">旅游消费分类统计</div>
        <div id="lyxffltjChart" class="lyxffltjChart"></div>
      </div>
    </div>
  </div>
</template>
<style>
.gzlabel {
  color: #fff;
}
.gzgnum {
  color: #43d7b5;
  font-weight: bold;
  font-size: 20px;
  font-style: italic;
}
.gzlistt {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.gzfb {
  width: 120px;
  height: 32px;
  background: #105065;
  border: 1px solid #066ca9;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  line-height: 32px;
}
.gznum {
  text-align: center;
  font-size: 30px;
  color: #fe0000;
  font-weight: bold;
  font-style: italic;
}
.ha {
  text-align: left;
  color: #fff;
  margin-top: 10px;
}
.el-input__icon {
  line-height: 26px !important;
}
.el-input__inner {
  border: 1px solid #fff;
  background: #000;
  color: #fff;
  height: 25px;
}
.el-collapse-item__arrow {
  position: absolute;
  color: #297bf7;
  /* margin-left: -64px !important; */
}
</style>
<script>
import * as echarts from "echarts";
export default {
  components: {},
  watch: {},
  created() {},
  data() {
    return {
      cur: 0,
      dataliest: ["日", "月", "年"],
      hotelList: [
        {
          name: "一茶一点 (徐闻金马店)",
          hot: 96,
          score: "5.0",
        },
        {
          name: "鱼里烤鱼（徐闻天润广场店）",
          hot: 92,
          score: "4.9",
        },
        {
          name: "食得香羊粥(徐闻分店)",
          hot: 91,
          score: "4.8",
        },
        {
          name: "三煲小院(三煲两舍)",
          hot: 90,
          score: "4.7",
        },
        {
          name: "小小蛙-炭烤牛蛙",
          hot: 86,
          score: "4.6",
        },
      ],
    };
  },
  mounted() {
    this.getdata2();
    this.getdata3();
    this.getdata4();
  },
  methods: {
    xzx(index) {
      this.cur = index;
    },
    getdata3() {
      const chartDom = document.getElementById("jdchart");
      const myChart = echarts.init(chartDom);
      let option;

      option = {
        title: [
          {
            text: "40.6%", // \n是换行
            subtext: "酒店入住率",

            textStyle: {
              color: "#01ffff",

              fontSize: 25, // 标题字体
            },
            top: "37%",
            left: "47%",
            fontWeight: "bold",
            subtextStyle: {
              color: "#fff",
              lineHeight: 0,
              fontSize: 10, // 副标题字体
            },

            textAlign: "center",
          },
        ],
        tooltip: {
          trigger: "item",
        },

        series: [
          {
            type: "pie",
            radius: ["60%", "80%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },

            labelLine: {
              show: false,
            },
            data: [
              { value: 1048, name: "入住" },
              { value: 735, name: "未入住" },
            ],

            color: ["#077bfb", "#6a726e"], // 这里指定了四种不同的颜色
          },
        ],
      };
      option && myChart.setOption(option);
    },
    getdata2() {
      const chartDom = document.getElementById("klchart");
      const myChart = echarts.init(chartDom);

      let option = {
        grid: {
          top: "15%",
          bottom: "10%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          axisLabel: {
            color: "#fff",
            interval: 0,
          },
          data: [
            "广东省",
            "广西省",
            "山东省",
            "河北省",
            "吉林省",
            "湖北省",
            "江苏省",
          ],
        },
        yAxis: {
          type: "value",

          nameTextStyle: {
            color: "#fff",
          },
          axisLabel: {
            color: "#fff",
          },
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
            barWidth: 17,
            color: "#297bf7",
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#4386f5", // 起点颜色
                  },
                  {
                    offset: 1,
                    color: "#2af7c8", // 终点颜色
                  },
                ]),
                shadowColor: "rgba(0, 0, 0, 0)",
              },
            },
          },
        ],
      };
      option && myChart.setOption(option);
    },
    getdata4() {
      const chartDom = document.getElementById("lyxffltjChart");
      const myChart = echarts.init(chartDom);

      let option = {
        color: ["#67F9D8", "#FFE434", "#56A3F1", "#FF917C"],

        legend: {
          show: false,
        },
        radar: [
          {
            indicator: [
              { text: "餐饮", max: 150 },
              { text: "住宿", max: 150 },
              { text: "交通", max: 150 },
              { text: "旅游", max: 120 },
              { text: "购物", max: 108 },
              { text: "娱乐", max: 72 },
            ],
            center: ["50%", "50%"],
            radius: 80,
            splitArea: {
              areaStyle: {
                color: ["rgba(0,0,0,0.2)"],
              },
            },
            axisName: {
              color: "#fff",
              backgroundColor: "#666",
              borderRadius: 3,
              padding: [3, 5],
            },
          },
        ],
        series: [
          {
            type: "radar",
            radarIndex: 0,
            data: [
              {
                value: [120, 118, 130, 100, 99, 70],
                name: "",
                symbol: "rect",
                symbolSize: 12,
                lineStyle: {
                  type: "dashed",
                },
                label: {
                  show: true,
                  formatter: function (params) {
                    return params.value;
                  },
                },
              },
              {
                value: [100, 93, 50, 90, 70, 60],
                name: "",
                areaStyle: {
                  color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
                    {
                      color: "rgba(1,255,255, 0.1)",
                      offset: 0,
                    },
                    {
                      color: "rgba(1,255,255, 0.7)",
                      offset: 1,
                    },
                  ]),
                },
              },
            ],
          },
        ],
      };
      option && myChart.setOption(option);
    },
  },
};
</script>
<style scoped>
.jqxq {
  padding: 10px;
  box-sizing: border-box;
  color: #fff;
  text-align: center;
  line-height: 6px;
  height: 25px;
  margin-left: 22px;
  display: inline-block;
  border: 1px solid #0091fe;
  cursor: pointer;

  width: auto;
  background: #0f4e60;
}
.klyjyj {
  color: #fff;
  margin-top: 18px;
}
.yjxx {
  margin-top: 18px;
  margin-left: 18px;
  width: 403px;
  height: 264px;
  padding: 15px;
  border-radius: 8px;

  box-sizing: border-box;
  background: rgba(3, 8, 13, 0.6);
}
.qyitem:nth-child(3n) {
  margin-right: 0px !important;
}
.qyitem img {
  height: 80px;
}
.qyitem {
  float: left;
  margin-right: 15px;
  width: 119px;
  color: #fff;
  margin-bottom: 12px;
}
.pielist {
  margin-bottom: 11px;
  color: #ffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pielist span {
  font-size: 20px;
  font-weight: bold;

  margin-right: 5px;
}
#pie1 {
  width: 171px;
  height: 90px;
  margin-top: 10px;
  float: left;
}
#pie2 {
  width: 171px;
  height: 90px;
  margin-top: 10px;
  float: left;
}
.peiall {
  width: 100%;
  height: auto;
  overflow: hidden;
}
.qhname {
  text-align: center;
  color: #fff;
  font-size: 20px;
  margin-top: 10px;
}
.qhoimg img {
  width: 63px;
  height: 53px;
}
.qhoimg {
  text-align: center;
  margin-top: 19px;
}
.qhdate {
  text-align: left;
  color: #fff;
  font-weight: bold;
  font-size: 16px;
  font-style: italic;
}
.qhlist1:nth-child(3n) {
  margin-right: 0px !important;
}
.qhlist1 {
  width: 33%;
  float: left;
  height: 186px;
  border-top: 1px solid #0cd0a4;
  background: #0f3b26;
  padding: 10px;
  box-sizing: border-box;
  margin-right: 1px;
}
.qhlist {
  margin-top: 14px;
  width: 100%;
  height: auto;
  overflow: hidden;
}
.temm span {
  font-size: 64px !important;
}
.temm {
  text-align: left;
  font-size: 20px;
  color: #01ffff;
  font-weight: bold;
  font-style: italic;
}
.w66 {
  float: left;
  width: 66%;
  padding-left: 15px;
  box-sizing: border-box;
}
.weather {
  text-align: center;
  font-weight: bold;
  font-size: 20px;
  color: #fff;
  font-style: italic;
}
.dyyf img {
  width: 104px;
  height: 81px;
}
.dyyf {
  text-align: center;
}
.w33 {
  float: left;
  width: 33%;
}
.one {
  padding: 15px 0px;
  height: 680px !important;
  box-sizing: border-box;
  background: rgba(3, 8, 13, 0.6);
  margin-left: 18px;
  border-radius: 8px;
}
.ybb {
  width: 100%;
  height: auto;
  overflow: hidden;
  margin-top: 22px;
}
.rightone {
  width: 421px;
  height: auto;
  float: right;
  margin-left: 18px;
}
.paizi {
  width: 22px;
  height: 22px;
  background: #ff9d4d;
  border-radius: 5px;
  color: #fff;
  display: inline-block;
  text-align: center;
  line-height: 22px;
}
.tableColumn {
  margin: 0 auto;
  height: 42px;
  /* border-radius: 8px; */
  font-size: 13px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
  color: #ffffff;
  border-bottom: 1px solid #0e785c;

  line-height: 42px;
}
.tableColumn2 {
  margin: 0 auto;
  height: 42px;
  /* background: rgba(67, 215, 181, 0.1); */
  border-bottom: 1px solid #0e785c;
  text-align: center;
  /* border-radius: 8px; */
  font-size: 13px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
  color: #ffffff;
  line-height: 42px;
}
.table {
  height: 42px;
  background: rgba(67, 215, 181, 0.5);
  border-radius: 8px;
  margin: 0 auto;
  font-size: 13px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
  color: #ffffff;
  line-height: 42px;
}
.tableTr {
  display: inline-block;
  width: 20%;
  text-align: left;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
  padding-left: 10px;
}
.cyright {
  width: calc(100% - 208px);
  height: 80px;
  padding: 10px;
  box-sizing: border-box;
  color: #01dfde;
  background: #0e2013;
  float: left;
}

.pfnum {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  line-height: 0px;
  color: #ffcc00;
}
.jp img {
  width: 33px !important;
  height: 40px !important;
}
.jp {
  text-align: center;
}
.pf {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 70px;
  height: 70px;
}
.cyimg img {
  width: 100%;
  height: 100%;
}
.cyimg {
  width: 208px;
  height: 80px;
  position: relative;
  float: left;
}
.cypxdy {
  width: 100%;
  height: auto;
  overflow: hidden;
}
.djlabel1 {
  width: 25%;
  float: left;
  height: 10px;
  margin-top: 5px;
}
.djlabel1:first-child {
  background: #00fefe;
}
.djlabel1:nth-child(2) {
  background: #43d7b5;
}
.djlabel1:nth-child(3) {
  background: #ffcc00;
}

.djlabel1:nth-child(4) {
  background: #fd0000;
}

.djlabel {
  width: 25%;
  float: left;
  color: #fff;
  text-align: center;
}
.jddj {
  width: 100%;
  height: auto;
  overflow: hidden;
}
.jdslnum {
  color: #01ffff;
  font-weight: bold;
  font-style: italic;
}
.jdrzfour:nth-child(2n-2) {
  background: #0f3140;
}
.jdrzfour:last-child {
  border-bottom: 1px solid #0f3140;
}
.jdrzfour {
  text-align: left;
  height: 30px;
  line-height: 30px;
  color: #fff;
  padding-left: 10px;
  box-sizing: border-box;
}
.jdrubz {
  text-align: left;
  color: #fff;
  margin-bottom: 10px;
}
.jdlist {
  width: calc(100% - 160px);
  height: auto;
  float: left;
}
#jdchart {
  width: 160px;
  height: 160px;
  float: left;
}
.jdgl {
  width: 100%;
  height: auto;
  overflow: hidden;
}
.cyzhpx {
  width: 100%;
  height: 286px;
  background: rgba(3, 8, 13, 0.6);
  border-radius: 8px;
  padding: 15px;
  box-sizing: border-box;
  margin-top: 18px;
}
.sxtall {
  margin-top: 23px;
  width: 100%;
  height: 290px;
  border: 1px solid #00fefe;
}
.sxtzs {
  text-align: left;
  color: #fff;
}
.sxtnum {
  text-align: left;
  font-size: 30px;
  color: #0091fe;
  font-style: italic;
  font-weight: bold;
}
.sxtone {
  width: 50%;
  padding-left: 24px;
  box-sizing: border-box;
  float: left;
}
.sxtfirst1 {
  width: 100%;
  height: 210px;
  padding: 0px 77px 0px 20px;

  padding-top: 10px;
  box-sizing: border-box;
}
.sxtfirst {
  width: 100%;
  height: 100px;
  border-bottom: 1px solid #00fefe;
  padding-top: 10px;
  box-sizing: border-box;
}
.sxtfg {
  width: 100%;
  height: 670px;
  background: rgba(3, 8, 13, 0.6);

  padding: 15px;
  box-sizing: border-box;
}
.ylpx {
  width: 100%;
  height: 402px;
  background: rgba(3, 8, 13, 0.6);

  margin-top: 19px;
  padding: 15px;
  box-sizing: border-box;
}
.xsts {
  width: 100%;
  height: 532px;
  background: rgba(3, 8, 13, 0.6);
  border-radius: 8px;
  padding: 15px;
  box-sizing: border-box;
}
.jdqk {
  width: 100%;
  height: 350px;
  background: rgba(3, 8, 13, 0.6);
  border-radius: 8px;
  padding: 15px;
  box-sizing: border-box;
  margin-top: 18px;
}
.klchart {
  width: 100%;
  height: 223px;
  margin-top: 18px;
}
.lefttwo {
  float: left;
  width: 420px;
  height: auto;
  box-sizing: border-box;
}
#yklytjchart {
  width: 100%;
  height: 154px;
}

.nlcf {
  color: #fff;
  text-align: left;
}
.kljcnum span {
  font-size: 20px;
  font-weight: bold;
  font-style: italic;
}
.kljcnum {
  color: #fff;
}
.kljclabel {
  color: #fff;
}
.kljclist {
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.jqys {
  margin-top: 17px;
  width: 100%;
  height: 220px;
  background: rgba(3, 8, 13, 0.6);
  border-radius: 8px;
  padding: 15px;
  box-sizing: border-box;
}
.klpx {
  width: 100%;
  height: 283px;
  background: rgba(3, 8, 13, 0.6);
  border-radius: 8px;
  padding: 15px;
  box-sizing: border-box;
}
.ykcf {
  margin-top: 17px;
  width: 100%;
  height: 280px;
  background: rgba(3, 8, 13, 0.6);
  border-radius: 8px;
  padding: 15px;
  box-sizing: border-box;
}
.kljc {
  margin-top: 17px;
  width: 100%;
  height: 174px;
  background: rgba(3, 8, 13, 0.6);
  border-radius: 8px;
  padding: 15px;
  box-sizing: border-box;
}
.kynum {
  color: #43d7b5;
  font-weight: bold;
  font-style: italic;
  font-size: 20px;
  margin: 0px 5px;
}
.jknum {
  color: #0091fe;
  font-weight: bold;
  font-style: italic;
  font-size: 20px;
  margin: 0px 5px;
}
.ljpm {
  width: 100%;
  height: 35px;
  border: 1px dashed #fff;
  margin-top: 5px;
  color: #fff;
  line-height: 35px;
  padding: 0px 5px;
  box-sizing: border-box;
}
.bhd span {
  color: #dfb704;
}
.bhd {
  position: absolute;
  right: 56px;
}
.jrjq {
  position: absolute;

  line-height: 14px;
  right: 14px;
}
.title {
  font-size: 24px;
  font-family: YouSheBiaoTiHei, YouSheBiaoTiHei-Regular;
  font-weight: 600;
  text-align: left;
  font-style: italic;
  color: #ffffff;
  width: 308px;
  background: url("../../../assets/qjjk/标题背景.png") no-repeat;
  background-size: 100% 100%;
  height: 42px;
  padding-left: 25px;
  box-sizing: border-box;
}
.main {
  overflow: hidden;
  position: absolute;
  left: 22px;
  top: 90px;
  width: 420px;
}
.leftone {
  width: 421px;
  float: left;
  height: auto;
}
.jdgk {
  width: 100%;
  height: 230px;
  background: rgba(3, 8, 13, 0.6);
  border-radius: 8px;
  padding: 15px;
  box-sizing: border-box;
}
.ac {
  color: #fff !important;

  background: #0091fe !important;
}
.datelist {
  float: right;
  cursor: pointer;
  width: 33px;
  height: 24px;
  text-align: center;
  line-height: 24px;
  color: #0370be;
  border: 1px solid #0370be;
}
.xstsdate {
  margin-top: 20px;
  overflow: hidden;
}
.lyxffltjChart {
  width: 100%;
  height: 220px;
}
</style>
<style>
.collapseZdy .el-collapse-item__header {
  background-color: rgba(1, 255, 255, 0.16);
  border-radius: 3px 3px 0px 0px;
  font-size: 14px;
  font-family: Source Han Sans SC, Source Han Sans SC-Regular;
  font-weight: 400;
  text-align: left;
  color: #ffffff;
  padding-left: 6px;
  border-bottom: 3px solid #01ffff;
  position: relative;
  margin-bottom: 10px;
  height: 40px;
}
.collapseZdy {
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
}
.collapseZdy .el-collapse-item__wrap {
  background-color: transparent !important;
  border-bottom: none !important;
  color: #fff !important;
}
.collapseZdy .el-collapse-item__content {
  color: #fff !important;
  padding-bottom: 0;
  height: 100%;
}
</style>
<style scoped>
.yqtitle {
  font-size: 20px;
  text-align: center;
  color: #eff0ef;
}
.yqpie {
  width: 100%;
  height: 100px;
}
.yqpxlb {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-around;
}
.yqxlln {
  width: 33.3%;
  height: auto;
}
</style>
